import React, { useEffect, useState, useContext } from 'react'
import Echarts from '&/baseUI/EChartsUI'
import { Context } from '../../context'
import { cloneDeep } from 'lodash';
const options = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      crossStyle: {
        color: '#999'
      }
    }
  },
  legend: {
    show: true
  },
  grid: {
    left: '3%',
    right: '3%',
    top: '12%',
    bottom: '14%'
  },
  // dataZoom: [
  //   { start:0,
  //     end:50,
  //     type: 'inside',
  //     moveOnMouseWheel: true, // 内部滚动条使用鼠标滚轮滚动
  //     zoomOnMouseWheel: false // 鼠标滚轮放大缩小
  //   },
  //   { 
  //     type: 'slider',
  //     height: 10,
  //     bottom: 7
  //   }
  // ],
  xAxis:
  {
    type: 'category',
    axisPointer: {
      type: 'shadow'
    },
    position: 'bottom',
  }
  ,
  yAxis: [
    {
      type: 'value',
      name: '用电量',
      splitLine: {
        show: false
      },
      axisTick: { show: false }
    },
    {
      type: 'value',
      name: '用电百分比',
      splitLine: {
        show: false
      },

      axisTick: {
        show: false
      },
      axisLabel: {
        formatter: '{value}%'
      }
    }
  ],
  series: []
}

const SameRing = () => {
  const { entRingData, paramsData, entValue } = useContext(Context);
  const [option, setoption] = useState({});

  const devTypeMap = new Map([
    [1, "企业总电"],
    [2, "产污设施"],
    [3, "治污设施"],
    [5, "产治一体"],
    [4, "间接用电"]
  ]);

  const getSeries = (list = []) => {
    return list.map(item => {
      if (item.name === '环比' || item.name === '同比') {
        return {
          type: 'bar',
          smooth: true,
          yAxisIndex: 1,
          data: item.data,
          name: item.name,


        }
      }
      return {
        type: 'bar',
        smooth: true,
        data: item.data,
        name: item.name
      }
    })
  }

  const getOptions = (entRingData) => {
    const cloneOption = cloneDeep(options)
    const { data_info } = entRingData;
    const devName = devTypeMap.get(paramsData.dev_type);
    const devData = data_info[devName];
    const list = [{
      name: '环比',
      data: devData?.ring,
    }, {
      name: '同比',
      data: devData?.same
    }, {
      name: '同比增量',
      data: devData?.same_incr
    }, {
      name: '环比增量',
      data: devData?.ring_incr
    }];
    if (devName) {
      list.unshift({
        name: `${devName}: ${entValue[0].entName}`,
        data: devData?.cur,
      })
    }
    cloneOption.xAxis.data = entRingData.time_list;
    cloneOption.series = getSeries(list)
    return cloneOption

  }


  useEffect(() => {
    if (entRingData) {
      setoption({})
      // const data1 = getOptions(entRingData).series.filter(item => {
      //   return item.name == "环比"
      // })
      // const data2 = getOptions(entRingData).series.filter(item => {
      //   return item.name == "同比"
      // })
      // //同比环比组成层的新数组
      // const dataSecoend = [...data1[0]?.data, ...data2[0]?.data].filter(item => {
      //   return item != "--"
      // })

      // const result1 = getOptions(entRingData).series.filter(item => {
      //   if (item.name != "环比" && item.name != "同比") {
      //     return item
      //   }
      // })
      // const dataThird = [...result1[0]?.data, ...result1[1]?.data, ...result1[2]?.data].filter(item => {
      //   return item != "--"
      // })
      // const max1 = Math.max(1, ...dataThird) || 1;
      // const min1 = Math.min(0, ...dataThird) || 0;
      // const max2 = Math.max(1, ...dataSecoend) || 1;
      // const min2 = Math.min(0, ...dataSecoend) || 0;
      // let y1Max
      // let y2Max
      // let y1Min
      // let y2Min
      // const ratio = (max1 - min1) / (max2 - min2);
      // if (max1 < max2 * ratio) {
      //   y1Max = max2 * ratio;
      //   y2Max = max2;
      // } else {
      //   y1Max = max1;
      //   y2Max = max1 / ratio;
      // }
      // if (min1 < min2 * ratio) {
      //   y1Min = min1;
      //   y2Min = min1 / ratio;
      // } else {
      //   y1Min = min2 * ratio;
      //   y2Min = min2;
      // }

      const options = cloneDeep(getOptions(entRingData))
      options.yAxis[0].max = (val) => {
        if (val.min >= 0 && val.max >= 0) return val.max;
        if (Math.abs(val.max) > Math.abs(val.min)) {
          return (Math.abs(val.max) * 1.2).toFixed(0);
        }
        return (Math.abs(val.min) * 1.2).toFixed(0);
      }
      options.yAxis[0].min = val => {
        if (val.min >= 0 && val.max >= 0) return val.min;
        if (Math.abs(val.max) > Math.abs(val.min)) {
          return (-Math.abs(val.max) * 1.2).toFixed(0);
        }
        return (-Math.abs(val.min) * 1.2).toFixed(0);
      }
      options.yAxis[1].max = (val) => {
        if (val.min >= 0 && val.max >= 0) return val.max;
        if (Math.abs(val.max) > Math.abs(val.min)) {
          return (Math.abs(val.max) * 1.2).toFixed(0);
        }
        return (Math.abs(val.min) * 1.2).toFixed(0);
      }
      options.yAxis[1].min = val => {
        if (val.min >= 0 && val.max >= 0) return val.min;
        if (Math.abs(val.max) > Math.abs(val.min)) {
          return (-Math.abs(val.max) * 1.2).toFixed(0);
        }
        return (-Math.abs(val.min) * 1.2).toFixed(0);
      }
      setoption(options)
    }

  }, [entRingData,paramsData.dev_type])
  return (
    <div style={{ height: '100%' }}>
      <Echarts option={option} width={'100%'} />
    </div>
  )
}

export default SameRing